<template>
    <div class="container">
        <div class="tp">
            <!-- 头像 -->
            <img :src="user.avatarUrl" class="headImg"/>
            <!-- 昵称 -->
            <div class="headTxt">{{user.nickName}}
                <!-- 性别 -->
                <img v-if="user.gender == 1" src="/static/img/man.png" class="gender"/>
                <img v-if="user.gender == 2" src="/static/img/girl.png" class="gender"/>
                <img v-if="user.gender == 0" src="/static/img/who.png" class="gender"/>
            </div>
        </div>
        <i-panel>
            <div class="about">
                <div class="topic">所在地点</div>
                <div class="desc" @click="map">{{user.province}} {{user.city}}</div>
            </div>
            <div class="about">
                <div class="topic">关于我们</div>
                <div class="desc">邹景煌 制作于 2019.4</div>
            </div>
        </i-panel>
   </div>
</template>
<script>
export default {
    data() {
        return {
            user:{},
        }
    },
    methods:{
        personal() {
            wx.getUserInfo({
                success: (res) => {
                    this.user = res.userInfo
                }
            })    
        },
        map() {
            wx.getLocation({
                type: 'gcj02', //返回可以用于wx.openLocation的经纬度
                success: function (res) {
                    var latitude = res.latitude
                    var longitude = res.longitude
                    wx.openLocation({
                        latitude: latitude,
                        longitude: longitude,
                        scale: 28
                    })
                }
            })
        }
    },
    onLoad() {
        this.personal()
    }
} 
</script>
<style lang='stylus' scoped>
.tp
    border 1px solid #cdcdcd
    margin 20rpx
    height 400rpx
    display flex
    justify-content center
    align-items center
    flex-direction column
    background white
.headImg
    border-radius 50%
    width 200rpx
    height 200rpx
.headTxt
    text-align center
    font-size 32rpx
    margin-top 20rpx
.about:last-child
    border-bottom 1px solid #cdcdcd
.about
    border-top 1px solid #cdcdcd
    padding 40rpx
    font-size 30rpx
    display flex
    justify-content center
.about div
    width 100%
.gender
    width 40rpx
    height 40rpx
    margin-left 20rpx
    vertical-align middle
</style>
